<template>
  <div class="refresh">
    <div class="loader loader-3">
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "refresh"
  }
</script>

<style scoped>
  .loader {
    position: relative;
    width: 46px;
    height: 20px;
    border-radius: 50%;
    margin: 0px;
    display: inline-block;
    vertical-align: middle;
  }

  .loader-3 .dot {
    width: 6px;
    height: 6px;
    background: #f6bd16;
    border-radius: 50%;
    position: absolute;
    top: calc(50%);
  }

  .loader-3 .dot1 {
    left: 0px;
    -webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
  }

  .loader-3 .dot2 {
    left: 20px;
    -webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
  }

  .loader-3 .dot3 {
    left: 40px;
    -webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
  }

  @-webkit-keyframes dot-jump {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }

  @keyframes dot-jump {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }

</style>
